/* 响应式工具类 */

/* 隐藏/显示工具 */
.hidden-xs { display: none !important; }
.hidden-sm { display: none !important; }
.hidden-md { display: none !important; }
.hidden-lg { display: none !important; }

.visible-xs { display: block !important; }
.visible-sm { display: block !important; }
.visible-md { display: block !important; }
.visible-lg { display: block !important; }

/* 响应式网格系统 */
.responsive-grid {
  display: grid;
  gap: var(--grid-gap, 10px);
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-width, 250px), 1fr));
}

.responsive-grid--xs { --grid-min-width: 150px; --grid-gap: 12px; }
.responsive-grid--sm { --grid-min-width: 200px; --grid-gap: 16px; }
.responsive-grid--md { --grid-min-width: 250px; --grid-gap: 20px; }
.responsive-grid--lg { --grid-min-width: 300px; --grid-gap: 24px; }

/* 响应式间距 */
.responsive-padding {
  padding: var(--padding-xs, 10px);
}

.responsive-margin {
  margin: var(--margin-xs, 10px);
}

/* 响应式字体大小 */
.responsive-text {
  font-size: var(--text-xs, 14px);
  line-height: var(--line-height-xs, 1.4);
}

/* 响应式容器 */
.responsive-container {
  width: 100%;
  max-width: var(--container-max-width, 1200px);
  margin: 0 auto;
  padding: 0 var(--container-padding, 20px);
}

/* 触摸设备优化 */
.touch-optimized {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.touch-optimized button,
.touch-optimized a {
  min-height: 44px;
  min-width: 44px;
}

/* 移动端优化 */
.mobile-optimized {
  --container-padding: 15px;
  --grid-gap: 12px;
  --padding-xs: 8px;
  --margin-xs: 8px;
  --text-xs: 13px;
  --line-height-xs: 1.5;
}

/* 平板优化 */
.tablet-optimized {
  --container-padding: 20px;
  --grid-gap: 16px;
  --padding-xs: 12px;
  --margin-xs: 12px;
  --text-xs: 14px;
  --line-height-xs: 1.4;
}

/* 桌面端优化 */
.desktop-optimized {
  --container-padding: 20px;
  --grid-gap: 20px;
  --padding-xs: 16px;
  --margin-xs: 16px;
  --text-xs: 16px;
  --line-height-xs: 1.4;
}

/* 响应式断点 */
@media (max-width: 480px) {
  .hidden-xs { display: block !important; }
  .visible-xs { display: none !important; }
  
  .responsive-container {
    --container-padding: 15px;
  }
  
  .responsive-grid {
    --grid-min-width: 150px;
    --grid-gap: 12px;
  }
  
  .responsive-padding {
    --padding-xs: 8px;
  }
  
  .responsive-margin {
    --margin-xs: 8px;
  }
  
  .responsive-text {
    --text-xs: 13px;
    --line-height-xs: 1.5;
  }
}

@media (max-width: 768px) {
  .hidden-sm { display: block !important; }
  .visible-sm { display: none !important; }
  
  .responsive-container {
    --container-padding: 20px;
  }
  
  .responsive-grid {
    --grid-min-width: 200px;
    --grid-gap: 16px;
  }
  
  .responsive-padding {
    --padding-xs: 12px;
  }
  
  .responsive-margin {
    --margin-xs: 12px;
  }
  
  .responsive-text {
    --text-xs: 14px;
    --line-height-xs: 1.4;
  }
}

@media (max-width: 992px) {
  .hidden-md { display: block !important; }
  .visible-md { display: none !important; }
  
  .responsive-container {
    --container-padding: 20px;
  }
  
  .responsive-grid {
    --grid-min-width: 250px;
    --grid-gap: 20px;
  }
  
  .responsive-padding {
    --padding-xs: 16px;
  }
  
  .responsive-margin {
    --margin-xs: 16px;
  }
  
  .responsive-text {
    --text-xs: 16px;
    --line-height-xs: 1.4;
  }
}

@media (max-width: 1200px) {
  .hidden-lg { display: block !important; }
  .visible-lg { display: none !important; }
}

/* 横屏模式优化 */
@media (orientation: landscape) and (max-height: 500px) {
  .responsive-container {
    --container-padding: 15px;
  }
  
  .responsive-padding {
    --padding-xs: 8px;
  }
  
  .responsive-margin {
    --margin-xs: 8px;
  }
}

/* 触摸设备检测 */
@media (hover: none) and (pointer: coarse) {
  .touch-optimized {
    --container-padding: 15px;
    --grid-gap: 16px;
  }
  
  .touch-optimized button,
  .touch-optimized a {
    min-height: 44px;
    min-width: 44px;
  }
}

/* 高分辨率屏幕 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .responsive-text {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
  .responsive-container {
    background-color: #1a1a1a;
    color: #ffffff;
  }
}

/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
  .responsive-container * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 打印样式 */
@media print {
  .responsive-container {
    max-width: none;
    padding: 0;
  }
  
  .hidden-xs,
  .hidden-sm,
  .hidden-md,
  .hidden-lg {
    display: block !important;
  }
  
  .visible-xs,
  .visible-sm,
  .visible-md,
  .visible-lg {
    display: none !important;
  }
}
